<template>
  <s-layout title="支付结果">
    <div class="page">
      <div class="success">
        <image
          class="ico"
          :src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
          mode="widthFix"
          lazy-load="false"
        />

        <div class="title">支付成功</div>
        <div class="price">￥{{ state.price }}</div>
      </div>

      <template v-if="status">
		  <div class="content">
		    <div class="box">
		      <div class="line_1">
		        <image
		          class="ico_1"
		          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/dd199d07a4e895ed5986053d2c22c339.png"
		          mode="widthFix"
		          lazy-load="false"
		          binderror=""
		          bindload=""
		        />
		        <image
		          class="ico_1"
		          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/18cbd955cbc5a3e02ef8ac462e3433a2.png"
		          mode="aspectFit|aspectFill|widthFix"
		          lazy-load="false"
		          binderror=""
		          bindload=""
		        />
		        <div class="text_1">现金红包</div>
		      </div>
		  
		      <div class="line_1">
		        <image
		          class="ico_1"
		          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/dd199d07a4e895ed5986053d2c22c339.png"
		          mode="widthFix"
		          lazy-load="false"
		          binderror=""
		          bindload=""
		        />
		        <image
		          class="ico_1"
		          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/a5fef81aae050a945cd0c5739a798e38.png"
		          mode="widthFix"
		          lazy-load="false"
		          binderror=""
		          bindload=""
		        />
		        <div class="text_1">消费卷</div>
		      </div>
		  
		      <div class="line_3">随机领取现金红包和消费券</div>
		    </div>
		  
		    <image
		      class="bgi"
		      src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/fa8b5a7a03931d39b6b48b6728b13b96.png"
		      mode="widthFix"
		    />
		  </div>
		  
		  <image
		    @click="pay_open"
		    class="btn_1"
		    mode="widthFix"
		    src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250326/78e154cf49ebbc1ee22ab1603290b74f.png"
		  ></image>
		  
		  <view class="btn_2" @click="go_home">返回首页</view>
	  </template>
	  <template v-else>
		  <image
		    @click="sheep.$router.go('/pages/tuangou/prize_draw_of_time?order_sn=' + state.order_sn)"
		    class="cjbtn1"
		    mode="widthFix"
		    src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250412/f6cec398c6081c168e7311046199de00.png"
		  ></image>
	  </template>
    </div>
  </s-layout>
</template>

<script setup>
import { onLoad, onHide, onShow } from '@dcloudio/uni-app';
import { reactive, computed, ref } from 'vue';
import sheep from '@/sheep';

let state = reactive({
  order_sn: '',
  pay_result: {},
});

let status = ref(true)

function go_home() {
  uni.switchTab({
    url: '/pages/index/home',
  });
}

function pay_open() {
  sheep.$api.pay.buyOpen({ order_sn: state.order_sn }).then((res) => {
    console.log(res);
    if (res.error == 0) {
      let coupon = "";
      let product= "";
      if (res.data.product) {
        product = res.data.product.price;
      }

      if (res.data.coupon) {
        coupon = res.data.coupon.amount_text;
      }
      let tips = `恭喜您抽中红包${product}元和${coupon}优惠券 详情到 我的-中奖记录 中查看`;
      uni.showModal({
        title: '提示',
        content: tips,
        showCancel: false
      });
    }
  });
}
const get_shoppoolorderType = async () => {
	const res = await sheep.$api.tuangou.shoppoolorderType({order_sn:state.order_sn});
	if(res.error === 0){
		if(res.data === 'buyRedBag'){
			status.value = false
		}
	}
};

onLoad((options) => {
  let { order_sn, price } = options;
  state.order_sn = order_sn;
  state.price = price;
  // 获取订单类型
  get_shoppoolorderType()
});
</script>

<style lang="less" scoped>
.page {
  background-color: #fff;
  padding-top: 5vh;
}

image {
  display: block;
  width: 100%;
  height: 100%;
}

.success {
  display: flex;
  flex-direction: column;
  align-items: center;

  .ico {
    width: 100rpx;
    height: 100rpx;
  }

  .title {
    margin: 25rpx 0;
  }
}

.content {
  width: 646rpx;
  height: 242rpx;
  margin: 100rpx auto 0;
  border: 6rpx solid #e32c04;
  border-radius: 10rpx;
  position: relative;

  .box {
    box-sizing: border-box;
    height: 242rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 700;

    .line_1 {
      display: flex;
      align-items: center;

      .ico_1 {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
      }
    }

    .line_3 {
      font-size: 26rpx;
      color: #000;
    }
  }

  .bgi {
    position: absolute;
    z-index: 9999;
    top: 10rpx;
    right: -5rpx;
    width: 266rpx;
    height: 200rpx;
  }
}

.btn_1 {
  width: 646rpx;
  margin: 100rpx auto 0;
}

.btn_2 {
  position: fixed;
  bottom: 10vh;
  left: calc(50vw - 120rpx);
  width: 200rpx;
  text-align: center;
  font-size: 28rpx;
  padding: 20rpx;
  border-radius: 99em;
  border: 2rpx solid #ccc;
}
.cjbtn1{
	width: 90%;
	margin-left: 5%;
	margin-top: 40rpx;
	height: 260rpx;
}
</style>